<template>
  <view class="message-container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <input class="search-input" type="text" placeholder="搜索客户" v-model="searchKeyword" />
      <text class="search-icon" @click="searchCustomers">🔍</text>
    </view>

    <!-- 消息列表 -->
    <scroll-view scroll-y class="message-list">
      <view 
        class="message-item" 
        v-for="chat in filteredChats" 
        :key="chat.customerId"
        @click="openChat(chat)"
      >
        <image class="avatar" :src="chat.avatar" mode="aspectFill"></image>
        <view class="message-content">
          <view class="message-header">
            <text class="customer-name">{{ chat.customerName }}</text>
            <text class="message-time">{{ chat.lastMessageTime }}</text>
          </view>
          <view class="message-preview">
            <text class="last-message">{{ chat.lastMessage }}</text>
            <view class="unread-badge" v-if="chat.unreadCount > 0">
              <text class="unread-count">{{ chat.unreadCount }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 聊天窗口 -->
    <view class="chat-modal" v-if="showChatModal">
      <view class="chat-header">
        <text class="back-button" @click="closeChat">←</text>
        <text class="chat-title">{{ currentChat?.customerName }}</text>
        <text class="more-button">⋮</text>
      </view>

      <scroll-view 
        scroll-y 
        class="chat-messages"
        :scroll-top="scrollTop"
        @scrolltoupper="loadMoreMessages"
      >
        <view 
          class="message-bubble" 
          v-for="(message, index) in currentChat?.messages" 
          :key="index"
          :class="{ 'message-sent': message.sender === 'service_001' }"
        >
          <image 
            class="message-avatar" 
            :src="message.sender === 'service_001' ? serviceAvatar : currentChat?.avatar" 
            mode="aspectFill"
          ></image>
          <view class="message-text">
            <!-- 普通文本消息 -->
            <text v-if="!isOrderMessage(message.content)">{{ message.content }}</text>
            <!-- 订单消息 -->
            <view v-else class="order-message" @tap="showOrderDetail(parseOrderMessage(message.content))">
              <view class="order-card">
                <view class="order-header">
                  <text class="order-title">订单信息</text>
                  <text class="order-status">{{ parseOrderMessage(message.content).orderStatus }}</text>
                </view>
                <view class="order-info">
                  <view class="order-row">
                    <text class="order-label">订单号：</text>
                    <text class="order-value">{{ parseOrderMessage(message.content).orderNumber }}</text>
                  </view>
                  <view class="order-row">
                    <text class="order-label">下单时间：</text>
                    <text class="order-value">{{ parseOrderMessage(message.content).orderTime }}</text>
                  </view>
                  <view class="order-row">
                    <text class="order-label">总金额：</text>
                    <text class="order-value">¥{{ parseOrderMessage(message.content).totalAmount }}</text>
                  </view>
                </view>
                <view class="order-tip">点击查看详情</view>
              </view>
            </view>
            <text class="message-time">{{ formatTime(message.time) }}</text>
          </view>
        </view>
      </scroll-view>

      <view class="chat-input-area">
        <input 
          class="message-input" 
          type="text" 
          v-model="newMessage" 
          placeholder="输入消息..."
          @confirm="sendMessage"
        />
        <button class="send-button" @click="sendMessage">发送</button>
      </view>
    </view>

    <!-- 订单详情弹窗 -->
    <view class="order-detail-modal" v-if="showOrderDetailModal" @tap="closeOrderDetailModal">
      <view class="detail-mask"></view>
      <view class="detail-content" @tap.stop>
        <view class="detail-header">
          <text class="detail-title">订单详情</text>
          <text class="detail-close" @tap="closeOrderDetailModal">×</text>
        </view>
        <scroll-view class="detail-body" scroll-y>
          <view class="detail-section">
            <view class="section-title">基本信息</view>
            <view class="detail-row">
              <text class="detail-label">订单号：</text>
              <text class="detail-value">{{ currentOrderDetail.orderNumber }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">下单时间：</text>
              <text class="detail-value">{{ currentOrderDetail.orderTime }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">订单状态：</text>
              <text class="detail-value status-text">{{ currentOrderDetail.orderStatus }}</text>
            </view>
            <view class="detail-row" v-if="currentOrderDetail.paymentMethod">
              <text class="detail-label">支付方式：</text>
              <text class="detail-value">{{ currentOrderDetail.paymentMethod }}</text>
            </view>
            <view class="detail-row" v-if="currentOrderDetail.remark">
              <text class="detail-label">订单备注：</text>
              <text class="detail-value">{{ currentOrderDetail.remark }}</text>
            </view>
          </view>
          
          <view class="detail-section" v-if="currentOrderDetail.items && currentOrderDetail.items.length > 0">
            <view class="section-title">菜品信息</view>
            <view class="dish-list">
              <view class="dish-item" v-for="(dish, index) in currentOrderDetail.items" :key="index">
                <view class="dish-main">
                  <view class="dish-info">
                    <text class="dish-name">{{ dish.dishName }}</text>
                  </view>
                  <view class="dish-quantity-price">
                    <text class="dish-quantity">x{{ dish.quantity }}</text>
                    <text class="dish-price">¥{{ dish.price }}</text>
                  </view>
                </view>
                <view class="dish-subtotal">
                  <text class="subtotal-text">总计：¥{{ (dish.price * dish.quantity).toFixed(2) }}</text>
                </view>
              </view>
            </view>
          </view>
          
          <view class="detail-section">
            <view class="section-title">费用明细</view>
            <view class="cost-list">
              <view class="cost-item" v-if="currentOrderDetail.subtotal">
                <text class="cost-label">菜品总额：</text>
                <text class="cost-value">¥{{ currentOrderDetail.subtotal }}</text>
              </view>
              <view class="cost-item" v-if="currentOrderDetail.deliveryFee">
                <text class="cost-label">配送费：</text>
                <text class="cost-value">¥{{ currentOrderDetail.deliveryFee }}</text>
              </view>
              <view class="cost-item" v-if="currentOrderDetail.discount">
                <text class="cost-label">优惠金额：</text>
                <text class="cost-value discount-text">-¥{{ currentOrderDetail.discount }}</text>
              </view>
              <view class="cost-item total-item">
                <text class="cost-label">实付金额：</text>
                <text class="cost-value total-text">¥{{ currentOrderDetail.totalAmount }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '消息',
      searchKeyword: '',
      showChatModal: false,
      currentChat: null,
      newMessage: '',
      scrollTop: 0,
      serviceAvatar: '/static/service-avatar.png', // 客服头像
      chats: [], // 聊天列表
      serviceId: 'service_001', // 客服ID
      pollTimer: null, // 轮询定时器
      lastMessageTime: 0, // 最后一条消息的时间戳
      hasUnreadMessages: false, // 添加是否有未读消息的标志
      showOrderDetailModal: false,
      currentOrderDetail: null
    }
  },
  computed: {
    filteredChats() {
      if (!this.searchKeyword) return this.chats;
      return this.chats.filter(chat => 
        chat.customerName.toLowerCase().includes(this.searchKeyword.toLowerCase())
      );
    }
  },
  methods: {
    // 开始轮询
    startPolling() {
      // 每3秒轮询一次
      this.pollTimer = setInterval(this.pollNewMessages, 3000)
    },

    // 停止轮询
    stopPolling() {
      if (this.pollTimer) {
        clearInterval(this.pollTimer)
        this.pollTimer = null
      }
    },

    // 轮询获取新消息
    async pollNewMessages() {
      try {
        const response = await uni.request({
          url: 'http://localhost:8080/api/messages/all',
          method: 'GET',
          data: {
            receiver: this.serviceId
          }
        })
        
        if (response.statusCode === 200 && response.data.code === 200 && response.data.data) {
          // 按最后一条消息的时间排序
          const sortedChats = response.data.data.sort((a, b) => {
            const timeA = typeof a.lastMessageTime === 'string' ? 
              new Date(a.lastMessageTime).getTime() : a.lastMessageTime
            const timeB = typeof b.lastMessageTime === 'string' ? 
              new Date(b.lastMessageTime).getTime() : b.lastMessageTime
            return timeB - timeA
          })
          
          // 更新聊天列表
          this.chats = sortedChats.map(chat => ({
            customerId: chat.sender,
            customerName: `客户${chat.sender}`,
            avatar: '/static/avatar.png',
            lastMessage: chat.lastMessage,
            lastMessageTime: this.formatTime(new Date(chat.lastMessageTime).toLocaleString('zh-CN')),
            unreadCount: chat.unreadCount || 0,
            messages: []
          }))

          // 更新是否有未读消息的状态
          this.updateUnreadStatus()

          // 如果当前正在查看某个聊天，更新该聊天的消息
          if (this.currentChat) {
            await this.fetchHistoryMessages(this.currentChat.customerId)
          }
        }
      } catch (error) {
        console.error('轮询新消息失败:', error)
      }
    },

    // 更新未读消息状态
    updateUnreadStatus() {
      // 计算总未读数
      const totalUnread = this.chats.reduce((sum, chat) => sum + (chat.unreadCount || 0), 0)
      this.hasUnreadMessages = totalUnread > 0
      
      // 设置tabBar上的小红点
      if (this.hasUnreadMessages) {
        uni.showTabBarRedDot({
          index: 1 // 假设消息tab在第二个位置
        })
      } else {
        uni.hideTabBarRedDot({
          index: 1
        })
      }
    },

    // 获取历史消息
    async fetchHistoryMessages(customerId) {
      try {
        const response = await uni.request({
          url: 'http://localhost:8080/api/messages',
          method: 'GET',
          data: {
            sender: customerId,
            receiver: this.serviceId
          }
        })
        
        if (response.statusCode === 200 && response.data.code === 200 && response.data.data) {
          // 按时间排序
          const sortedMessages = response.data.data.sort((a, b) => {
            const timeA = typeof a.sendTime === 'string' ? 
              new Date(a.sendTime).getTime() : a.sendTime
            const timeB = typeof b.sendTime === 'string' ? 
              new Date(b.sendTime).getTime() : b.sendTime
            return timeA - timeB
          })
          
          // 更新聊天记录
          this.currentChat.messages = sortedMessages.map(msg => ({
            content: msg.content,
            time: new Date(msg.sendTime).toLocaleString('zh-CN'),
            sender: msg.sender
          }))
          
          // 更新最后一条消息的时间戳
          if (sortedMessages.length > 0) {
            const lastMsg = sortedMessages[sortedMessages.length - 1]
            this.lastMessageTime = typeof lastMsg.sendTime === 'string' ? 
              new Date(lastMsg.sendTime).getTime() : lastMsg.sendTime
          }
          
          // 滚动到底部
          this.$nextTick(() => {
            this.scrollToBottom()
          })
        }
      } catch (error) {
        console.error('获取历史消息失败:', error)
      }
    },

    // 发送消息
    async sendMessage() {
      if (!this.newMessage.trim() || !this.currentChat) return
      
      const message = {
        type: 'message',
        sender: this.serviceId,
        receiver: this.currentChat.customerId,
        content: this.newMessage,
        sendTime: new Date().getTime()
      }
      
      try {
        // 发送消息
        const response = await uni.request({
          url: 'http://localhost:8080/api/messages',
          method: 'POST',
          data: message,
          header: {
            'content-type': 'application/json'
          }
        })
        
        if (response.statusCode !== 200) {
          throw new Error('发送失败')
        }
        
        // 更新UI
        this.currentChat.messages.push({
          content: this.newMessage,
          time: new Date().toLocaleString('zh-CN'),
          sender: this.serviceId
        })
        this.currentChat.lastMessage = this.newMessage
        this.currentChat.lastMessageTime = this.formatTime(new Date().toLocaleString('zh-CN'))
        this.newMessage = ''
        
        // 更新最后一条消息的时间戳
        this.lastMessageTime = message.sendTime
        
        // 滚动到底部
        this.$nextTick(() => {
          this.scrollToBottom()
        })
      } catch (error) {
        console.error('发送消息失败:', error)
        uni.showToast({
          title: '发送失败，请重试',
          icon: 'none'
        })
      }
    },

    // 格式化时间
    formatTime(time) {
      return time.split(' ')[1] // 只返回时间部分
    },

    searchCustomers() {
      console.log('搜索关键词:', this.searchKeyword)
    },

    openChat(chat) {
      this.currentChat = chat
      this.showChatModal = true
      // 标记消息为已读
      chat.unreadCount = 0
      // 更新未读状态
      this.updateUnreadStatus()
      // 获取历史消息
      this.fetchHistoryMessages(chat.customerId)
    },

    closeChat() {
      this.showChatModal = false
      this.currentChat = null
      this.newMessage = ''
    },

    scrollToBottom() {
      const query = uni.createSelectorQuery().in(this)
      query.select('.chat-messages').boundingClientRect(data => {
        this.scrollTop = data.height
      }).exec()
    },

    loadMoreMessages() {
      if (this.currentChat) {
        this.fetchHistoryMessages(this.currentChat.customerId)
      }
    },

    // 获取所有聊天记录
    async fetchAllChats() {
      try {
        const response = await uni.request({
          url: 'http://localhost:8080/api/messages/all',
          method: 'GET',
          data: {
            receiver: this.serviceId
          }
        })
        
        if (response.statusCode === 200 && response.data.code === 200 && response.data.data) {
          // 按最后一条消息的时间排序
          const sortedChats = response.data.data.sort((a, b) => b.lastMessageTime - a.lastMessageTime)
          
          // 更新聊天列表
          this.chats = sortedChats.map(chat => ({
            customerId: chat.sender,
            customerName: `客户${chat.sender}`,
            avatar: '/static/avatar.png',
            lastMessage: chat.lastMessage,
            lastMessageTime: this.formatTime(new Date(chat.lastMessageTime).toLocaleString('zh-CN')),
            unreadCount: chat.unreadCount || 0,
            messages: []
          }))
        }
      } catch (error) {
        console.error('获取聊天记录失败:', error)
      }
    },

    // 页面显示时更新未读状态
    onShow() {
      this.updateUnreadStatus()
    },

    // 页面隐藏时更新未读状态
    onHide() {
      this.updateUnreadStatus()
    },

    // 判断是否为订单消息
    isOrderMessage(content) {
      try {
        const parsed = JSON.parse(content)
        return parsed.type === 'order'
      } catch (error) {
        return false
      }
    },

    // 解析订单消息
    parseOrderMessage(content) {
      try {
        return JSON.parse(content)
      } catch (error) {
        console.error('解析订单消息失败:', error)
        return {}
      }
    },

    // 显示订单详情
    showOrderDetail(order) {
      console.log('点击订单消息，订单数据:', order)
      this.currentOrderDetail = order
      this.showOrderDetailModal = true
      console.log('弹窗状态:', this.showOrderDetailModal)
    },

    closeOrderDetailModal() {
      this.showOrderDetailModal = false
      this.currentOrderDetail = null
    },

    testOrderMessage() {
      // 模拟一个订单消息用于测试
      const testOrderMessage = {
        type: 'order',
        orderId: 44,
        orderNumber: '订单44',
        orderTime: '2025/5/26上午11:30:00',
        orderStatus: '已支付',
        totalAmount: 68,
        subtotal: 68,
        deliveryFee: 0,
        discount: 0,
        paymentMethod: '未知',
        remark: '',
        items: [{
          dishId: 12,
          dishName: '香煎银鲳鱼',
          description: '银鲳鱼肉质细嫩，香煎后外酥里嫩，搭配柠檬汁，清新解腻。',
          quantity: 1,
          price: 98,
          subtotal: '98.00'
        }]
      }
      
      // 添加到当前聊天的消息列表
      if (this.currentChat) {
        this.currentChat.messages.push({
          content: JSON.stringify(testOrderMessage),
          time: new Date().toLocaleString('zh-CN'),
          sender: this.currentChat.customerId
        })
        
        // 滚动到底部
        this.$nextTick(() => {
          this.scrollToBottom()
        })
      } else {
        uni.showToast({
          title: '请先打开一个聊天',
          icon: 'none'
        })
      }
    }
  },
  mounted() {
    // 获取所有聊天记录
    this.fetchAllChats()
    // 开始轮询
    this.startPolling()
  },
  beforeDestroy() {
    // 停止轮询
    this.stopPolling()
  }
}
</script>

<style>
.message-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.search-bar {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #C70209;
}

.search-input {
  flex: 1;
  height: 70rpx;
  background-color: #ffffff;
  border-radius: 35rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
}

.search-icon {
  margin-left: 20rpx;
  color: #ffffff;
  font-size: 36rpx;
}

.test-btn {
  padding: 20rpx;
  background-color: #C70209;
  color: #ffffff;
  text-align: center;
  font-size: 28rpx;
}

.message-list {
  flex: 1;
  background-color: #ffffff;
}

.message-item {
  display: flex;
  padding: 20rpx;
  border-bottom: 1px solid #eee;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.message-content {
  flex: 1;
}

.message-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.customer-name {
  font-size: 32rpx;
  font-weight: bold;
}

.message-time {
  font-size: 24rpx;
  color: #999;
}

.message-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.last-message {
  font-size: 28rpx;
  color: #666;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unread-badge {
  background-color: #C70209;
  border-radius: 20rpx;
  padding: 4rpx 12rpx;
  margin-left: 10rpx;
  min-width: 32rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.unread-count {
  color: #ffffff;
  font-size: 24rpx;
  line-height: 1;
}

/* 聊天窗口样式 */
.chat-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.chat-header {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #C70209;
  color: #ffffff;
}

.back-button {
  font-size: 40rpx;
  padding: 0 20rpx;
}

.chat-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
}

.more-button {
  font-size: 40rpx;
  padding: 0 20rpx;
}

.chat-messages {
  flex: 1;
  padding: 20rpx;
}

.message-bubble {
  display: flex;
  margin-bottom: 20rpx;
}

.message-sent {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin: 0 20rpx;
}

.message-text {
  max-width: 60%;
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 10rpx;
  position: relative;
}

.message-sent .message-text {
  background-color: #C70209;
  color: #ffffff;
}

.message-time {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.message-sent .message-time {
  color: rgba(255, 255, 255, 0.8);
}

.chat-input-area {
  display: flex;
  padding: 20rpx;
  background-color: #ffffff;
  border-top: 1px solid #eee;
}

.message-input {
  flex: 1;
  height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 40rpx;
  padding: 0 30rpx;
  margin-right: 20rpx;
}

.send-button {
  width: 120rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #C70209;
  color: #ffffff;
  border-radius: 40rpx;
  font-size: 28rpx;
}

/* 订单消息样式 */
.order-message {
  width: 100%;
}

.order-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  border: 1rpx solid #eee;
  max-width: 100%;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.order-title {
  font-size: 28rpx;
  font-weight: bold;
}

.order-status {
  font-size: 24rpx;
  color: #007AFF;
  background-color: rgba(0, 122, 255, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
}

.order-info {
  margin-bottom: 12rpx;
}

.order-row {
  display: flex;
  margin-bottom: 8rpx;
}

.order-label {
  font-size: 24rpx;
  color: #666;
  width: 120rpx;
}

.order-value {
  font-size: 24rpx;
  color: #333;
  flex: 1;
}

.order-tip {
  font-size: 22rpx;
  color: #999;
  text-align: center;
  padding-top: 8rpx;
  border-top: 1rpx solid #eee;
}

/* 订单详情弹窗样式 */
.order-detail-modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999;
}

.detail-mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.detail-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  transform: translateY(0);
  transition: transform 0.3s;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 20rpx 20rpx;
  border-bottom: 1rpx solid #eee;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
}

.detail-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.detail-close {
  font-size: 40rpx;
  color: #999;
  padding: 10rpx;
}

.detail-body {
  flex: 1;
  padding: 20rpx;
  background-color: #f8f8f8;
}

.detail-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
  padding-bottom: 12rpx;
  border-bottom: 1rpx solid #eee;
}

.detail-row {
  display: flex;
  margin-bottom: 12rpx;
  align-items: flex-start;
}

.detail-label {
  font-size: 26rpx;
  color: #666;
  width: 140rpx;
  flex-shrink: 0;
}

.detail-value {
  font-size: 26rpx;
  color: #333;
  flex: 1;
  word-break: break-all;
}

.status-text {
  color: #007AFF;
  font-weight: bold;
}

.dish-list {
  background-color: #f8f8f8;
  border-radius: 8rpx;
  padding: 16rpx;
}

.dish-item {
  background-color: #fff;
  border-radius: 8rpx;
  padding: 16rpx;
  margin-bottom: 12rpx;
  border: 1rpx solid #eee;
}

.dish-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8rpx;
}

.dish-info {
  flex: 1;
}

.dish-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 4rpx;
}

.dish-quantity-price {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.dish-quantity {
  font-size: 24rpx;
  color: #666;
  background-color: #f0f0f0;
  padding: 4rpx 8rpx;
  border-radius: 4rpx;
}

.dish-price {
  font-size: 26rpx;
  color: #C70209;
  font-weight: bold;
}

.dish-subtotal {
  text-align: right;
  padding-top: 8rpx;
  border-top: 1rpx solid #f0f0f0;
}

.subtotal-text {
  font-size: 24rpx;
  color: #666;
}

.cost-list {
  background-color: #f8f8f8;
  border-radius: 8rpx;
  padding: 16rpx;
}

.cost-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.cost-label {
  font-size: 26rpx;
  color: #666;
}

.cost-value {
  font-size: 26rpx;
  color: #333;
}

.discount-text {
  color: #C70209;
}

.total-item {
  margin-top: 12rpx;
  padding-top: 12rpx;
  border-top: 1rpx solid #eee;
}

.total-text {
  color: #C70209;
  font-size: 28rpx;
  font-weight: bold;
}
</style> 